<template>
  <div>
    <h1>EmpPage</h1>
    <button @click="fun1">获取所有</button>
    <button @click="fun2">获取单个用户数据</button>
    <button @click="fun3">提供对象参数3</button>
    <button @click="fun4">提供对象参数4</button>
    <hr>
    <div>
      用户名<input type="text" v-model="emp.ename"> <br>
      性别<input type="radio" v-model="emp.esex" value="男"> 男
      <input type="radio" v-model="emp.esex" value="女">女 <br>
      工资<input type="text" v-model="emp.salary"> <br>
      密码<input type="text" v-model="emp.pwd"> <br>
      部门编号
      <select v-model="emp.dno">
        <option value="101">101</option>
        <option value="102">102</option>
        <option value="103">103</option>
      </select>
      <br>
      生产日期<input type="date" v-model="emp.bornDate"> <br>
    </div>

    <table border="1">
      <thead>
      <tr>
        <th>eno</th>
        <th>ename</th>
        <th>esex</th>
        <th>salary</th>
        <th>pwd</th>
        <th>dno</th>
        <th>bornDate</th>
      </tr>
      </thead>
      <tbody v-for="(e) in emps">
      <tr>
        <td>{{e.eno}}</td>
        <td>{{e.ename}}</td>
        <td>{{e.esex}}</td>
        <td>{{e.salary}}</td>
        <td>{{e.pwd}}</td>
        <td>{{e.dno}}</td>
        <td>{{e.bornDate}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  // 导入 qs 帮助我们把数据进行转换 vue对象数据 转为 url参数
  import Qs from 'qs'

  export default {
    name: "EmpPage",
    data() {
      return {
        emps: [],
        eno: 1001,
        emp: {
          ename: "zs",
          esex: "男",
          salary: "101",
          pwd: "123",
          dno: "101",
          bornDate: "2020-01-01"
        }
      }
    },
    methods: {
      fun1() {
        //创建变量接受 this,在axios中,this会被覆盖,因此不能使用this,所以设置变量接受this值
        //方便在axios中使用vue实例
        var vm = this;
        this.axios({
          url: "http://localhost:8081/emp/getAll",// 查询单个或者 删除
          method: "get"
        }).then(function (result) {
          console.log(result)
          console.log(result.data)
          console.log(this)
          vm.emps = result.data;
        })
      },
      fun2() {
        var vm = this;
        this.axios.get("http://localhost:8081/emp/getOne/" + vm.eno)
          // .then(x=>console.log(x))
          .then(function (result) {
            console.log(result)
          })
      },
      fun3() {
        var vm = this;
        this.axios({
          // url: "http://localhost:8081/emp/add1?"+Qs.stringify(vm.emp),
          url: "http://localhost:8081/emp/add1",
          method: "get",//,
          // params: { // 一般是用于传直接的参数 * 条件查询 ,参数存放在请求行
          //   // ename: vm.emp.ename,
          //   // esex: "男" ,
          //   // salary: "101",
          //   // pwd: "123",
          //   // dno: "101",
          //   // bornDate: "2020-01-01"
          //   emp:vm.emp
          // }
          // params:vm.emp
        })
      },
      fun4() {
        var vm = this;
        // let stringify = Qs.stringify(vm.emp);
        // console.log(stringify)
        this.axios({
          url: "http://localhost:8081/emp/add3",
          method: "post",
          // transformRequest: [ //拦截请求发送前,data是我能传输的数据,这个方法可以让我能发送请求前
          //                     //对数据进行格式化
          //   function (data) {
          //     return Qs.stringify(data);
          //   }
          // ],
          data: vm.emp  //data一般是用于传输 对象属性参数,使用在json数据 新增 修改* 参数在请求体中
        })
      }
    },
    mounted() {
      // this.fun1();
    }
  }
</script>

<style scoped>

</style>
